<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>沂水旅游-发布友圈</title>
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <link rel="stylesheet" href="/static/layuiadmin/layui/css/layui.css">
    <link rel="stylesheet" href="/static/index/css/base.css">
    <link rel="stylesheet" href="/static/index/css/baseDetail.css">
    <link rel="stylesheet" href="/static/index/css/gonglveWrite.css">
</head>
<body>

{include file="public/header" model='circle' /}

<div class="searchBox layui-hide-xs">
    <div class="layui-container mbx-top-nav">
        <div class="mianbaoxie-nav">
            <span class="layui-breadcrumb">
              <a href="/">首页</a>
              <a href="{:url('Circle/circleList')}">友圈列表</a>
              <a><cite>发布友圈</cite></a>
            </span>
        </div>

        <div class="weather">
            <iframe name="weather_inc" src="http://i.tianqi.com/index.php?c=code&id=5&py=linyi2" width="200" height="26"
                    frameborder="0" marginwidth="0" marginheight="0" scrolling="no"></iframe>
        </div>

    </div>
</div>

<form class="layui-form" id="theForm" method="post" action="{:url('Circle/writeVideoCircle')}">
    <div class="methodTitleBox">
        <div class="titleBox">
            <input type="text" name="title" id="gonglvTitle" placeholder="请输入友圈标题">
        </div>
    </div>

    <style>

        .up-box{
            width: 800px;
            margin: 0 auto;
        }

        .up-title{
            color: #5C5C5C;
            font-size: 14px;
            display: flex;
            align-items: center;
            height: 50px;
            padding:10px 0;
        }

        .up-btn-box{
            width: 420px;
            height: 100px;
            border: 1px solid #E6E6E6;
            display: flex;
            justify-content: space-between;
        }

        .up-btn-box a{
            display: inline-block;
            width: 135px;
            height: 100px;
            background-color:#E6E6E6;
            background-image: url('/static/index/images/addVideo.png?1');
            background-repeat: no-repeat;
            background-position:center;
            cursor: pointer;
        }

        .up-btn-box p{
            width:290px;
            height: 100px;
            display: flex;
            align-items: center;
            padding:0 15px;
            color: #ADADAD;
            font-size: 14px;
        }

        .upload_video{
            display: inline-block;
            width: 135px;
            height: 100px;
            opacity: 0;
            cursor: pointer;
        }

        .upload_progress{
            margin-top: 20px;
            display: none;
        }

    </style>

    <div class="up-box">
        <div class="up-title">
            <i class="layui-icon layui-icon-video" style="color: #20E6BA;font-size: 25px;margin-right: 10px;"></i>
            上传视频
        </div>

        <div class="up-btn-box">
            <a href="javascript:;"><input id="upload_video" class="upload_video" type="file" multiple="multiple" /></a>
            <input type="hidden" name="video_path" id="the_video_path">
            <p>支持多数视频格式，大小不超过500M，请勿上传反动色情等违法视频。
            </p>
        </div>


        <div class="layui-progress layui-progress-big upload_progress" lay-filter="upload_progress" lay-showPercent="true">
            <div class="layui-progress-bar" lay-percent="0%"></div>
        </div>
    </div>

    <div class="writeBox">

        <div class="writeBox-container">

            <div class="oneWrite">

                <div class="writeText">
                    <textarea placeholder="此处编辑视频简介内容..." class="write-textarea" id="video_content" name="video_content"></textarea>
                </div>

            </div>

        </div>

        <div class="xiangguan">
            <p style="line-height: 28px;padding-top: 6px;">选择分类：</p>
            <div class="xiangguan-op">

                {foreach $fc_tag as $k => $v}
                <input type="radio" name="fc_id" value="{$v.id}" title="{$v.data_name}" {eq name="k" value="0"}checked{/eq}>
                {/foreach}
            </div>
        </div>

    </div>

    <div class="toSubmit">

        <div class="xieyi">
            <div class="layui-form layui-form-submit">
                <input type="checkbox" name="is_read" value="1" title="已阅读并同意" lay-skin="primary" checked>
                <a href="javascript:;">沂水旅游网友圈协议</a>
            </div>
        </div>

        <div class="addButton">
            <button class="layui-btn layui-btn-addButton" type="button" id="toSubmit">确认发布</button>
        </div>

    </div>

</form>


{include file="public/footer" /}

<script type="text/javascript">
    var layer = layui.layer,
        form = layui.form,
        element = layui.element;

        form.render();
        element.init();

        layui.config({
            base: '/static/layuiadmin/modules/' //你的模块目录
        }); //加载入口

        layui.use(['qiniuyun'],function(){
        var qiniuyun = layui.qiniuyun;

            qiniuyun.loader({
                  domain: '{$domain}'
                , elem: "#upload_video"
                , token: "{$token}"
                , qianzhui:"lvyouvideo"
                , next: function(response){
                    $(".show_video").show();
                    var thePrecss = Math.floor(response.total.percent * 100) / 100;
                    element.progress('upload_progress', thePrecss + '%');
                }
                , error: function(err){
                    layer.msg('上传出错');
                }
                , complete: function(res){
                    layer.msg("上传成功！");
                    $("#the_video_path").val(res.key);

                }
            });
        });

    $('#toSubmit').click(function(){

        var title = $('#gonglvTitle').val();

        if (title == ''){
            layer.msg('请输入友圈标题',{icon:2,time:1500});
            return false;
        }

        var content = $('#video_content').val();

        if (content == ''){
            layer.msg('请输入视频简介',{icon:2,time:1500});
            return false;
        }


        if($('[name="is_read"]:checked').length==0){

            layer.msg('请阅读同意沂水旅游网友圈协议',{icon:2,time:1500});
            return false;
        };

        $('#theForm').submit();

    });
</script>

</body>
</html>